<template>
	<view class="page-content">
		<view class="page-body">
			<view class="con-title">{{datalist.title}}</view>
			<view class="con-time">{{datalist.time}}</view>
			<rich-text class="con-text" :nodes="datalist.contxt"></rich-text>
		</view>
	</view>
</template>

<script>
	import {
		getarticlecontents, //赛事介绍文章
		getcompanyarticlecontents //关于我们文章
	} from '@/common/api.js'
	import uniSection from "@/components/uni-section/uni-section.vue"
	export default {
		components: {
			uniSection
		},
		data() {
			return {
				type: '',
				id:'',
				datalist: {
					title: '2021春季城市穿越赛',
					time: '2021/04/01-2021/04/09',
					contxt: ''
				},
				list: [{
						name: '青年组',
						num: '6',
						money: '346'
					},
					{
						name: '老年组',
						num: '6',
						money: '278'
					},
					{
						name: '成年组',
						num: '6',
						money: '399'
					},
					{
						name: '情侣组',
						num: '2',
						money: '199'
					}
				]
			}
		},
		onLoad(option) {
			console.log(1234, option)
			if(option.item){
				let datalist = JSON.parse(option.item)
				this.id = datalist.id;
				this.datalist.title = datalist.title;
				this.datalist.time = datalist.create_time;
			}
			if(option.type==='ssjs'){
				this.getdata();
			}else if(option.type==='gywm'){
				this.getdata2();
			}
			
		},
		methods: {
			//获取文章列表
			getdata() {
				getarticlecontents({id:this.id}).then(res2 => {
					this.datalist.contxt = this.formatRichText(res2.data.data);
				})
			},
			//获取文章列表
			getdata2() {
				getcompanyarticlecontents({id:this.id}).then(res2 => {	
					this.datalist.contxt = this.formatRichText(res2.data.data);
				})
			},
			formatRichText(html) {
				let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
					match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
					match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
					match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
					return match;
				});
				newContent = newContent.replace(/style="[^"]+"/gi, function(match, capture) {
					match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi,
						'max-width:100%;');
					return match;
				});
				newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				newContent = newContent.replace(/\<img/gi,
					'<img style="max-width:100%;height:auto;display:inline-block;margin:10rpx auto;"');
				return newContent;
			},

		}
	}
</script>

<style lang="scss">
	.page-content {
		display: flex;
		flex-direction: column;

	}

	.page-top {
		width: 100%;
		height: 380rpx;
	}

	.page-body {
		display: flex;
		flex-direction: column;
		padding: 35rpx 30rpx;

		.con-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			line-height: 50rpx;
		}

		.con-time {
			font-size: 24rpx;
			font-weight: 500;
			color: #999999;
			line-height: 50rpx;
		}

		.con-text {
			font-size: 28rpx;
			font-weight: 500;
			color: #666;
			line-height: 50rpx;

			image {
				width: 100% !important;
				max-width: 100% !important;
			}
		}

	}
</style>
